* {
		    list-style: none;
		    padding: 0;
		    margin: 0;
		    font-size: 14px;
		    text-decoration: none;
		    color: black;
		    outline: none;
		}
		 
		html, body {
			background: #F7F7FC;
		    width: 100%;
		    height: 100%;
		}
		 
		.main {
		    height: 700px;
		    width: 1055px;
		    margin: auto;
		    margin-top: 20px;
		    box-shadow: 0 0 3px 5px #e1e1e1;
		}
		 
		.main .top {
		    width: 1055px;
		    height: 60px;
		    background-color: #2E2E2E;
		    border-top-left-radius: 10px;
		    border-top-right-radius: 10px;
		}
		 
		.main .top .top-left {
		    height: 100%;
		    width: 1000px;
		    float: left;
		    position: relative;
		}
		 
		.main .top .top-left .header {
		    height: 48px;
		    width: 48px;
		    border-radius: 50%;
		    line-height: 60px;
		    display: inline-block;
		    margin: 6px;
		    border: 1px solid transparent;
		}
		 
		.main .top .top-left .header:hover {
		    border: 1px solid white;
		}
		
		.main .top .top-left .search {
		    display: inline-block;
		    height: 30px;
			width: 900px;
		    position: absolute;
		    margin: 15px 14px;
		}
		
		.main .top .top-left .search .username {
			color: #FFFFFF;
			font-weight: 800;
			font-size: 20px;
		    width: 100%;
		    height: 100%;
		}
		
		.main .box {
		    width: 100%;
		    height: 640px;
		    border-bottom-left-radius: 10px;
		    border-bottom-right-radius: 10px;
		}
		.main .box .chat-list {
		    float: left;
		    width: 300px;
		    height: 100%;
		    background-color: #3D3D3D;
		}
		.main .box .chat-list .list-box {
		    height: 80px;
		    width: 300px;
		}
		.main .box .chat-list .list-box.select {
		    background-color: #2E2E2E;
		}
		.main .box .chat-list .list-box:hover {
		    background-color: #2E2E2E;
		}
		.main .box .chat-list .list-box .heading {
			position: relative;
			top: 0px;
		    height: 50px;
		    width: 50px;
		    border-radius: 50%;
		    margin: 15px 10px;
			float: left;
		}
		.main .box .chat-list .list-box .heading .unread-num {
		    min-height: 8px;
		    position: absolute;
		    top: 0;
		    left: 34px;
		    padding: 0 3px;
		    background: #fc5531;
		    border-radius: 8px;
		    border: 1px solid #fff;
		    font-size: 12px;
		    font-weight: 500;
		    line-height: 14px;
		    color: #fff;
		    text-align: center;
		    z-index: 1;
		}
		
		.main .box .chat-list .list-box .heading img.chat-head{
			border-radius: 50%;
			border: 1px solid #f4f4f4;
			height: 100%;
			width: 100%;
		}
		
		.main .box .chat-list .list-box .chat-rig {
		    float: left;
		    height: 50px;
		    width: 210px;
		    padding-left: 8px;
		    margin: 15px 0;
		}
		.main .box .chat-list .list-box .chat-rig .chat-name {
			float: left;
			width: 140px;
		}
		
		.main .box .chat-list .list-box .chat-rig .chat-name .title {
			color: #FFFFFF;
		    font-weight: 500;
			max-width: 80px;
		    font-size: 16px;
		    overflow: hidden;
		    white-space: nowrap;
		    text-overflow: ellipsis;
		}
		.main .box .chat-list .list-box .chat-rig .chat-name .relation {
			color: #26a1ff;
			background: rgba(38,161,255,.1);
			position: relative;
			color: #999aaa;
			margin-left: 4px;
			display: inline-block;
			height: 16px;
			line-height: 16px;
			background: hsla(0,0%,100%,.1);
			border-radius: 8px;
			padding: 0 8px;
			font-size: 10px;
			background: -webkit-gradient(linear,left bottom,left top,from(#4e4e4e),to(#464646));
			background: linear-gradient(1turn,#4e4e4e,#464646);
			vertical-align: middle;
		}
		.main .box .chat-list .list-box .chat-rig .chat-time {
			float: right;
			color: #999;
			width: 70px;
			font-size: 12px;
			line-height: 20px;
		}
		.main .box .chat-list .list-box .chat-rig .text {
			margin-top: 5px;
		    font-size: 12px;
		    overflow: hidden;
		    white-space: nowrap;
		    text-overflow: ellipsis;
		    color: #999999;
		}
		.main .box .box-right {
			background: #ffffff;
		    float: left;
		    width: 750px;
		    height: 100%;
		}
		.main .box .box-right .recvfrom {
		    width: 752px;
		    height: 480px;
		}
		.main .box .box-right .recvfrom .nav-top {
		    height: 45px;
		    width: 100%;
		}
		.main .box .box-right .recvfrom .nav-top p {
		    line-height: 45px;
		    font-size: 18px;
		    font-weight: 600;
		    margin-left: 25px;
		}
		.main .box .box-right .recvfrom .news-top {
		    height: 430px;
		    border-top: 1px solid #999999;
		    border-bottom: 1px solid #999999;
		    overflow-y: scroll;
		}
		.main .box .box-right .recvfrom .news-top ul {
		    height: 97%;
		    width: 100%;
		}
		.main .box .box-right .recvfrom .news-top ul li {
		    margin: 10px;
		    min-height: 80px;
		    position: relative;
		    overflow: hidden;
		}
		.main .box .box-right .recvfrom .news-top ul li .avatar img {
		    height: 40px;
		    width: 40px;
		    border-radius: 50%;
		}
		.main .box .box-right .recvfrom .news-top ul li .msg {
		    top: -10px;
		    margin: 8px;
		    min-height: 80px;
		}
		
		.main .box .box-right .recvfrom .news-top ul li .msg {
		    top: -10px;
		    margin: 8px;
		    min-height: 80px;
		}
		
		.main .box .box-right .recvfrom .news-top ul li::after {
		    clear: both;
		    content: "";
		    display: inline-block;
		}
		.main .box .box-right .recvfrom .news-top ul li .msg .msg-text {
		    background-color: #F5F6F7;
		    border-radius: 5px;
		    padding: 8px;
			color: #8B4513;
		}
		.main .box .box-right .recvfrom .news-top ul li .time {
		    height: 15px;
			text-align: center;
		    color: #ccc;
		}
		.main .box .box-right .recvfrom .news-top ul li.other .avatar {
		    position: absolute;
		    left: 0;
		    top: 25px;
		}
		.main .box .box-right .recvfrom .news-top ul li.other .msg {
		    position: absolute;
		    left: 40px;
			top: 15px
		}
		
		.main .box .box-right .recvfrom .news-top ul li.other .msg .msg-name {
		    font-size: 12px;
		    overflow: hidden;
		    white-space: nowrap;
		    text-overflow: ellipsis;
		    color: #999999;
		}
		
		.main .box .box-right .recvfrom .news-top ul li.self .msg .msg-name {
		    text-align: right;
			font-size: 12px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			color: #999999;
		}
		
		.main .box .box-right .recvfrom .news-top ul li.self .avatar {
		    position: absolute;
		    right: 0;
		    top: 25px;
		}
		.main .box .box-right .recvfrom .news-top ul li.self .msg {
		    position: absolute;
		    right: 38px;
			top: 15px;
		}
		.main .box .box-right .sendto {
		    width: 752px;
		    height: 160px;
		}
		.main .box .box-right .sendto .but-nav {
		    height: 40px;
		}
		.main .box .box-right .sendto .but-nav ul li {
		    float: left;
		    height: 22px;
		    width: 22px;
		    margin: 7px 15px;
		    background-size: 100% 100%;
		}
		.main .box .box-right .sendto .but-nav ul li.font {
		    background-image: url(../images/chat/font.png);
		}
		.main .box .box-right .sendto .but-nav ul li.face {
		    background-image: url(../images/chat/face.png);
		}
		.main .box .box-right .sendto .but-nav ul li.cut {
		    background-image: url(../images/chat/cut.png);
		}
		.main .box .box-right .sendto .but-nav ul li.page {
		    background-image: url(../images/chat/picture.png);
		}
		.main .box .box-right .sendto .but-nav ul li.old {
		    background-image: url(../images/chat/old.png);
		}
		
		.main .box .box-right .sendto .but-nav ul li.font:hover {
		    background-image: url(../images/chat/font1.png);
		}
		.main .box .box-right .sendto .but-nav ul li.face:hover {
		    background-image: url(../images/chat/face1.png);
		}
		.main .box .box-right .sendto .but-nav ul li.cut:hover {
		    background-image: url(../images/chat/cut1.png);
		}
		.main .box .box-right .sendto .but-nav ul li.page:hover {
		    background-image: url(../images/chat/picture1.png);
		}
		.main .box .box-right .sendto .but-nav ul li.old:hover {
		    background-image: url(../images/chat/old1.png);
		}
		.main .box .box-right .sendto .but-text textarea {
		    border: none;
			margin: 0 10px;
		    font-size: 17px;
			font-weight: 400;
		    width: 732px;
		    height: 80px;
		}
		.main .box .box-right .sendto .but-text .button {
		    float: right;
		    padding: 5px 25px;
		    background-color: #2E2E2E;
			color: #ffffff;
		    margin-right: 20px;
		}
		.clear{
			clear: both;
		}
